import React, { useState } from "react";

import { SearchIcon } from "@/components/icons";
import DefaultLayout from "@/layouts/default";
import { Table, TableHeader, TableBody, TableColumn, TableRow, TableCell } from "@heroui/table";
import { Kbd } from "@heroui/kbd";
import { Input } from "@heroui/input";
import { Button, ButtonGroup } from "@heroui/button";

const data = [
  {
    tradeId: "1",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "2",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "3",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "4",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "5",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "6",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "7",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "8",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "9",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "10",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "11",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "12",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "13",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "14",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "15",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "16",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "17",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "18",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "19",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
  {
    tradeId: "20",
    underlying: "CORN",
    version: 2,
    status: "Live"
  },
];


export default function IndexPage() {
  const [selectedRowId, setSelectedRowId] = useState<string | null>(null);
  const handleRowClick = (id: string) => {
    setSelectedRowId(id === selectedRowId ? null : id); // 点击同一行取消选择
  };

  return (
    <DefaultLayout>
      <div className="flex items-center gap-4">
        {/* Book Trade 按钮 */}
        <Button color="primary">
          Book Trade
        </Button>

        {/* Input */}
        <Input
          aria-label="Search"
          classNames={{
            inputWrapper: "bg-default-100",
            input: "text-sm",
          }}
          endContent={
            <Kbd className="hidden lg:inline-block" keys={["command"]}>
              K
            </Kbd>
          }
          labelPlacement="outside"
          placeholder="Search..."
          startContent={
            <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
          }
          type="search"
        />
      </div>
      {/* 添加一个容器或间距 */}
      <Table aria-label="Scrollable Table"
        isHeaderSticky
        color={"default"}
        defaultSelectedKeys={[selectedRowId || ""]}
        selectionMode="single"
        classNames={{
          base: "flex-grow overflow-y-auto",
          th: "bg-blue-200" // 表头行背景色
        }}
      >
        <TableHeader>
          <TableColumn>Underlying</TableColumn>
          <TableColumn>Trade Id</TableColumn>
          <TableColumn>Version</TableColumn>
          <TableColumn>Status</TableColumn>
        </TableHeader>
        <TableBody>
          {data.map((item) => (
            <TableRow key={item.tradeId}
              onClick={() => handleRowClick(item.tradeId)}
            >
              {/* 可展开的行内容 */}
              <TableCell>
                {item.underlying}
              </TableCell>
              <TableCell>
                {item.tradeId}
              </TableCell>
              <TableCell>{item.version}</TableCell>
              <TableCell>
                {item.status}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <div className="flex gap-4 items-center">
        <Button color="secondary">
          Deal
        </Button>
        <Button color="secondary">
          Amend
        </Button>
        <Button color="secondary">
          Cancel
        </Button>
        <Button color="secondary">
          Validate
        </Button>
        <Button color="secondary">
          Nack
        </Button>

      </div>

    </DefaultLayout>
  );
}
